<template>
<div>
    <section class="topImg" v-if="companyInfo" :style="{height:height+'px'}">
        <img :src="companyInfo.topImg" class="img" v-if="companyInfo.topImg" />
        <img :src="defaultImg" class="img" v-else />
    </section>
</div>
</template>

<script>
export default {
    props: {
        companyInfo: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            defaultImg: 'https://oss.bakerychina.com/common/top.png',
            height: 0,
            wh: 1920 / 120
        }
    },
    mounted() {
        this.resizePage()
    },
    beforeMount() {
        window.addEventListener('resize', this.resizePage, true)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizePage)
    },
    methods: {
        resizePage() {
            var windowWidth = document.documentElement.clientWidth;
            this.height=windowWidth/this.wh
        }
    },
}
</script>

<style lang="scss" scoped>
.topImg {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .img {
       max-width:100%;
       max-height: 100%;
    }
}
</style>
<style lang="scss" scoped>
@media (max-width:767px) {}
</style>
